<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sliding doors</title>
	<style> 
		*{
			margin:0px;
			padding:0px;
		}
		img{
			position: absolute;
			width:240px;
			height:240px;
			border-left:2px solid red;
			left: 0;
			display: block;
			transition:0.3s;
		}
		#container{
			
			height: 300px;
			margin: 0 auto;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			overflow: hidden;
			position: relative;
		}
	</style>
	
	
	
</head>
<body>
<div id="container">
	<img src="./img/door01.jpg" alt="door01" title="神啊"/>
	<img src="./img/door02.jpg" alt="door02" title="神啊"/>
	<img src="./img/door03.jpg" alt="door03" title="神啊"/>
	<img src="./img/door04.jpg" alt="door04" title="神啊"/>
</div>
	<script> 
		window.onload = function (){
			var box=document.getElementById("container");
			var imgs=box.getElementsByTagName("img");
			var imgWidth=imgs[0].offsetWidth;
			var exposeWidth=120;
			var boxWidth=imgWidth+(imgs.length-1)*exposeWidth;
			box.style.width = boxWidth+"px";
			//滑动门初始位置reset
			function setImgsPos(){
			for(var i=1,len=imgs.length;i<len;i++){
				imgs[i].style.left=imgWidth+exposeWidth*(i-1)+"px";	
			}
			}
			setImgsPos();
			//滑动
			var translate = imgWidth - exposeWidth;
			for(var i=0,len=imgs.length;i<len;i++){
				(function(i){
					imgs[i].onmouseover=function(){
						setImgsPos();
						for (var j =  1; j <= i; j++) {
							imgs[j].style.left = parseInt(imgs[j].style.left,10)-translate+"px";
						};
					}	
				})(i);
			}
		};
	</script>
</body>
</html>
